<template>
  <div>
    <p class="title">您有什么建议或意见对我们说？</p>
    <group>
      <x-input placeholder="请输入您的主题" v-model="fadeback.subject"></x-input>
      <x-textarea placeholder="请输入您的意见" :rows="5" v-model="fadeback.body"></x-textarea>
    </group>
    <p class="tips">
      (*^▽^*)请详细描述您遇到的问题，有助于我们快速定位并解决问题，或留下您宝贵的建议或意见，我们会认证进行评估！
    </p>
    <box gap="10px 10px">
      <x-button @click.native="submit()" type="warn">问 题 提 交</x-button>
    </box>
  </div>
</template>
<script type="text/javascript">
  import { XInput, XTextarea, Group, Box, XButton, stringTrim } from 'vux'
  export default {
    data () {
      return {
        fadeback: {
          subject: null,
          body: null
        }
      }
    },
    components: {
      XInput,
      XTextarea,
      Group,
      Box,
      XButton
    },
    methods: {
      submit () {
        if (!this.fadeback.subject || !stringTrim(this.fadeback.subject)) {
          this.$vux.toast.show({
            text: '请输入主题',
            type: 'cancel'
          })
          return false
        }
        if (!this.fadeback.body || !stringTrim(this.fadeback.body)) {
          this.$vux.toast.show({
            text: '请输入您的意见',
            type: 'cancel'
          })
          return false
        }
        this.$vux.loading.show()
        this.$http.post('/fadebacks', this.fadeback).then((response) => {
          this.$vux.loading.hide()
          this.$vux.toast.show('谢谢您的反馈 ~')
          this.$router.go(-1)
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .title {
    color: #e02e24;
    padding: 10px 10px 0 10px;
    font-size: 18px;
  }
  .tips {
    padding: 10px;
    color: #999;
    font-size: 14px;
  }
</style>